<template>
	<div class="fleet-toast" v-if="show">
		<view class="center-box">
			<view class="content">{{title}}</view>
		</view>
	</div>
</template>

<script>
	export default {
		name: 'toast',

		// props: {
		// 	title: String,
		// 	default: '操作成功!'
		// },

		data() {
			return {
				title: 'success!',
				show: false
			}
		},

		mounted() {
			console.log('this.specia');
		},

		methods: {
			showToast(params) {
				const {
					title,
					duration,
					success
				} = params || {}
				this.show = true
				console.log("params", params);
				title && (this.title = title)

				setTimeout(() => {
					this.show = false
					success.apply()
				}, duration || 1500)
			}
		}
	}
</script>

<style scoped lang='scss'>
	.fleet-toast {
		position: fixed;
		top: 0;
		right: 0;
		bottom: 0;
		left: 0;
		z-index: 9999;
		display: block;
		box-sizing: border-box;
		font-size: 16px;
		/* background-color: #ccc; */
		/* pointer-events: none; */

		.center-box {
			position: absolute;
			top: 50%;
			left: 50%;
			transform: translate(-50%, -50%);
			max-width: 80%;
			width: 80%;
			display: flex;
			justify-content: center;

			.content {
				color: #ffffff;
				font-size: 14px;
				background: rgba(17, 17, 17, .7);
				border-radius: 8px;
				padding: 16px;
				line-height: 25px;
			}
		}
	}
</style>